<template>
      <!--V2.3.0 预催收员提醒半小时内承诺还款订单-->
      <alert-dialog :visible.sync="showDialog" :title="$t('collection.toDoNotice')"  dialog-position="center-center" :modal="true" width="660px" class="thirty-dialog" :before-close="noRemindPre">
        <div>
          <h3>hello, {{ user.username }}</h3>
          <p class="tips_text">{{ $t('collection.closePromiseTime',{x: preCount}) }}</p>
        </div>
        <div slot="footer">
          <el-button @click="checkThirtyDetailPre" type="primary">{{ $t('collection.checkDetails') }}</el-button>
          <el-button @click="delayPreRemind" type="primary">{{ $t('collection.remindAfter') }}</el-button>
          <el-button @click="noRemindPre" type="default">{{ $t('common.close') }}</el-button>
        </div>
      </alert-dialog>
</template>

<script>
  import alertDialog from '../alert-dialog';
  import eventBus from '@/libs/event-bus';
  import { eventConf } from '@/config/';

  
  export default {
    name: 'promise-dialog',
    props: {
      title: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '50%'
      },
      titleIcon: {
        type: String
      },
      headerBorder: {
        type: Boolean,
        default: true
      },
      top: {
        type: String,
        default: '15vh'
      },
      modal: {
        type: Boolean,
        default: true
      },
      dialogPosition: {
        type: String,
        default: ''
      }
    },
    components: {
      alertDialog
    },
    data() {
      return {
        user: {
          id:'',
          username:''
        },
        showDialog: false,
        searchThirty: false,
        preOrderList: [],
        preCount: 0,
        timer: -1, // 定时器Id
        showCondition:false,  //展示的条件
        //remindDialogPage:['/conf/preCollection-manage/untreated-list','/conf/preCollection-manage/processed-list','/conf/preCollection-manage/returned-list'], //展示提醒的弹窗页面
        singleRecord:{
          id:'',
          orderId: "",
          repayScheduleId: '',
          repayStatus: '',
          userId: ''
        }
      };
    },
    computed: {
      style() {
        const style = {};
        if (this.width) {
          style.width = this.width;
        }
        if (this.dialogPosition === '') {
          style.marginTop = this.top;
        }
        return style;
      },
      position() {
        switch (this.dialogPosition) {
          case 'center':
            return 'center_dialog';
          case 'right-bottom':
            return 'right_bottom';
          default:
            return '';
        }
      },
    },
    methods: {
      //  查询预催1h内订单
      getRreCommitmentOrderInfo() {
        if(this.user){
          this.$api.collection.getYcsCommitmentOrderInfo({collectionUserId:this.user.id}, { showLoading: false}).then((res) => {
            const { status, data, error } = res;
            if ('1' === status && '00000000' === error) {
              this.showDialog = data.count > 0;
              this.preCount = data.count;
              this.preOrderList = data.orderList || [];
              if (this.preCount == 1) {
                this.singleRecord.id=data.orderList[0].id;
                this.singleRecord.userId = data.orderList[0].userId;
                this.singleRecord.orderId = data.orderList[0].orderId;
                this.singleRecord.repayScheduleId = data.orderList[0].repayScheduleId;
                this.singleRecord.repayStatus = data.orderList[0].repayStatus;
              }
              this.updatePreOderRemindStatus();
            }
          });
        }
        
      },
      //预催收更改订单的提醒状态为已提醒  
      updatePreOderRemindStatus() {
        const params = {
          orderList: this.preOrderList,
        };
        this.$api.collection.updateYcsOderRemindStatus(params, { showLoading: false }).then((res) => {
          const { status, error } = res;
          if ('1' === status && '00000000' === error) {
            //
          }
        });
      },
      // 查看预催详情
      checkThirtyDetailPre() {
        this.showDialog = false;
        if (this.preCount === 1) {
            this.$openNewBlank(`#/conf/collection/order-manage/order-detail/${this.singleRecord.id}/${this.singleRecord.orderId}/${this.singleRecord.repayStatus}/${this.singleRecord.userId}/${this.singleRecord.repayScheduleId}/yc`);
        } else if (this.preCount > 1) {
          eventBus.$emit(eventConf.PREURGINGNOPAY);
          this.$router.push({path:'/conf/collection/pre-order-manage/processed-list'});
        }
      },
      // 10min后提醒
      delayPreRemind() {
        const params = {
          "orderList": this.preOrderList,
        };
        this.$api.collection.delayYcsRemindTenMinute(params).then((res) => {
          const { status, error } = res;
          if ('1' === status && '00000000' === error) {
            this.showDialog = false;
          }
        });
      },
      // 不再提醒
      noRemindPre() {
        // clearInterval(this.timer);
        // this.updatePreOderRemindStatus();
        this.showDialog = false;
      },
    },
    mounted() {
      this.user=this.$storage.get('user')||null;
      if(this.user&&this.user.username!==''){
          this.getRreCommitmentOrderInfo();
          this.timer = setInterval(this.getRreCommitmentOrderInfo, 3 * 60 * 1000);
          // console.log(this.timer,1);
      }else{
        this.user={
          id:'',
          username:''
        };
      }
     
    },
    watch:{
      $route(to){
        if(to.path!=='/login'&&this.user.username!==''){
           setTimeout(() => {

            // console.log(this);
            // this.$store.dispatch('getUserAuthority');
            let remindModalAuthority = this.$store.getters.checkUserAuthority("/preCollection-manage/showRemindModal");
            let userNameNot= this.user.username!=="csAdmin";  //不针对催收主管
//            let toPath = this.remindDialogPage.indexOf(to.path)!==-1;  //to的地址是否所属与催收
            // let fromPath = this.remindDialogPage.indexOf(from.path)!==-1;  //from的地址是否所属与催收
            // console.log(remindModalAuthority , userNameNot , toPath)
            //满足条件的调用弹窗，否则，清楚定时器，不显示弹窗
            if(remindModalAuthority){
              this.showCondition=true;
              if(this.timer==-1){
                this.timer = setInterval(this.getRreCommitmentOrderInfo, 3* 60 * 1000);
                // console.log(this.timer,2);
              }
            }else{
              this.showCondition=false;
              if(this.timer!=-1){
                clearInterval(this.timer);
                this.timer = -1;
                // console.log(this.timer,3);
              }
            }
          },0)
        }
      }
        
    }
  };
</script>

<style lang="scss" scoped>
  .dialog{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    height:100%;
    width:100%;
    overflow-y:scroll;
  }
  .dialog_mask{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
    color: #2f3030;
  }
  .dialog_panel{
    width: 50%;
    background-color: #fff;
    border-radius: 8px;
    padding: 0 24px 24px;
    // margin-top: 50px;
    margin-bottom: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 110;
  }
  .center_dialog{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .right_bottom{
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
    margin: 0;
  }
  .dialog_header{
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dialog_header_border{
    border-bottom: 1px solid #d4d7da;
  }
  .dialog_title{
    font-size: 18px;
    height: 50px;
    line-height: 50px;
  }
  .dialog_close{
    font-size: 24px;
    cursor: pointer;
  }
  .dialog_title_icon{
    padding-left: 32px;
    background-size: 24px 24px;
    background-position: left center;
    background-repeat: no-repeat;
  }
  .icon_edit{
    background-image: url("~@/assets/img/icon_remark.png");
  }
  .dialog_body{
    padding: 20px 0 0;
  }
  .dialog_footer{
    padding: 16px 0 0;
    text-align: right;
  }
</style>
